<template>
	<view class="container">
		<!-- 店铺信息 -->
		<view class="store-info">
			<view class="store-icon">
				<uni-icons type="contact" size="30" color="#fff"></uni-icons>
			</view>
			<view class="store-name">
				<text>沂小蒙·炒鸡(利民东路店)</text>
				<view>
					沂小蒙·炒鸡(利民东路店)13258986097
				</view>
			</view>
			<uni-icons type="arrowright" size="20"></uni-icons>
		</view>
		<!-- 收货地址 -->
		<view class="address-info">
			<view class="address-icon">
				<uni-icons type="location-filled" size="30" color="#fff"></uni-icons>
			</view>
			<view class="address-text">
				<text>请填写收货地址</text>
			</view>
			<uni-icons type="arrowright" size="20"></uni-icons>
		</view>
		<view class="goods-container">
			<view class="expect-time">
				<text>期望送达时间</text>
				<picker mode="selector" range="['立即送达']" @change="onExpectTimeChange">
					<view class="picker">
						<text>立即送达</text>
						<uni-icons type="down" size="20"></uni-icons>
					</view>
				</picker>
			</view>
			<view class="goods-name">
				<text>商品名称</text>
				<input type="text" placeholder="请输入商品名称" v-model="goodsName"></input>
			</view>
			<view class="goods-quantity">
				<text>商品数量</text>
				<input type="number" placeholder="请输入商品数量" v-model="goodsQuantity"></input>
			</view>
			<view class="goods-price">
				<text>商品金额</text>
				<input type="digit" placeholder="请输入商品金额" v-model="goodsPrice"></input>
			</view>
			<view class="goods-weight">
				<text>商品重量</text>
				<input type="digit" placeholder="请输入商品重量" v-model="goodsWeight"></input>
			</view>
			<view class="order-note">
				<text>订单备注</text>
				<input type="text" placeholder="请输入订单备注" v-model="orderNote"></input>
			</view>
			<view class="footer-buttons">
				<button type="default" size="mini" @click="saveOrder">保存</button>
				<button type="primary" size="mini" @click="saveAndSendOrder">保存并发单</button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsName: '',
				goodsQuantity: '',
				goodsPrice: '',
				goodsWeight: '',
				orderNote: ''
			};
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			onExpectTimeChange(e) {
				// 处理期望送达时间选择变化
			},
			onGoodsTypeChange(e) {
				// 处理商品类型选择变化
			},
			saveOrder() {
				// 保存订单
				console.log('保存订单');
			},
			saveAndSendOrder() {
				// 保存并发单
				console.log('保存并发单');
			}
		}
	};
</script>

<style lang="scss">
	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
		height: 100vh;

		.header {
			display: flex;
			align-items: center;
			margin-bottom: 30rpx;

			.uni-icons {
				margin-right: 10rpx;
			}

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.store-info,
		.address-info {
			display: flex;
			align-items: center;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;

			.store-icon,
			.address-icon {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				background-color: #3399ff;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-right: 20rpx;
			}

			.store-name,
			.address-text {
				flex: 1;

				text {
					font-size: 29rpx;
					color: #333;
				}

				view {
					font-size: 25rpx;
					color: #999999;
					margin-top: 5rpx;
				}
			}

			.uni-icons {
				color: #999;
			}
		}

		.goods-container {
			background-color: #fff;
			padding: 20rpx;
		}

		.expect-time,
		.goods-type,
		.goods-name,
		.goods-quantity,
		.goods-price,
		.goods-weight,
		.order-note {
			padding: 34rpx 27rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			border-bottom: 1rpx solid #f7f7f7;

			text {
				font-weight: 400;
				font-size: 29rpx;
				color: #333333;
			}

			.input {
				flex: 1;
				padding: 10rpx 0;

			}

			.picker {
				display: flex;
				align-items: center;

				text {
					font-size: 28rpx;
					color: #333;
				}

				.uni-icons {
					margin-left: 10rpx;
				}
			}
		}

		.footer-buttons {
			display: flex;
			justify-content: space-between;

			button {
				width: 330rpx;
				height: 94rpx;
				background: #EEEEEE;
				border-radius: 74rpx 74rpx 74rpx 74rpx;
				margin-right: 10rpx;
				font-weight: 500;
				font-size: 33rpx;
				color: #333333;
				display: flex;
				justify-content: center;
				align-items: center;

				&:last-child {
					margin-right: 0;
					background: linear-gradient( 90deg, #4876FF 0%, #5260FF 100%);
					color: #fff;
				}
			}
		}
	}
</style>